<template>
  <div style="border: 1px solid #ccc">
    <div>
      <img :src="$a + '/tbowner/images?fileName=' + contentHtml.cover" style="width: 100%;height: 200px"/>
    </div>
    <div style="text-align: center">
      <p style='font: 36px / 38px "Microsoft YaHei";color: black' v-html="contentHtml.title"></p>
      <p style='font: 14px / 16px "Microsoft YaHei";color: black;padding: 15px 0 0'
         v-html="contentHtml.create_date"></p>
      <p style='font: 14px / 16px "Microsoft YaHei";color: black; padding:  15px 0 0'
         v-html="contentHtml.create_user"></p>
    </div>
    <div>
      <div style='color: #666;font: 14px / 26px "Microsoft YaHei";' v-html="contentHtml.brief_introduction"></div>
    </div>
    <hr style="border-top-style: dashed;"/>
    <div class="ql-container ql-snow" style="border: 0px">
      <div class="ql-editor" v-html="contentHtml.content"/>
    </div>
    <div style="padding: 20px">
      <div style="height: 40px"><h2 style="float:left;">评论</h2><span>(全部{{commentCount}}条)</span></div>
      <hr>
      <el-row>
        <el-col :span="24" style="padding-top: 5px">
          <el-col :span="1"><img :src="$a + '/tbowner/images?fileName=' + user.avatar"
                                 style="width: 30px;height: 30px"/></el-col>
          <el-col :span="23">
            <el-col :span="24" style="padding-top: 5px;color: #222226;padding-top: 5px">
              <el-input type="textarea" v-model="content" resize="none"  placeholder="评论内容"></el-input>
            </el-col>
            <el-col :span="24" style="margin-top: 10px" >
              <el-button type="primary" size="mini" style="float: right" @click="uploadContent(0)">评论</el-button>
            </el-col>
          </el-col>
        </el-col>


        <el-col :span="24" v-for="item in list" style="padding-top: 20px;">
          <el-col :span="1"><img :src="$a + '/tbowner/images?fileName=' + item.fromOwner.avatar"
                                 style="width: 30px;height: 30px"/></el-col>
          <el-col :span="23">
            <el-col :span="24" style="color: #777888">{{item.fromOwner.name}} <span style="font-size: 13px;margin-left: 20px">{{item.create_date}}</span></el-col>
            <el-col :span="24" style="padding-top: 5px;color: #222226;font-size: 14px">

              <el-popconfirm
                confirm-button-text="回复"
                cancel-button-text="取消"
                :hide-icon="false"
                @confirm="confirmClick(item,0)"
              >
                <span slot="reference">{{item.content}}</span>
              </el-popconfirm>
            </el-col>
            <el-col :span="24" style="padding-top: 5px">
              <el-col :span="24" style="padding-top: 8px" v-for="items in item.commentList">
                <el-col :span="1"><img :src="$a + '/tbowner/images?fileName=' + items.fromOwner.avatar"
                                       style="width: 30px;height: 30px"/></el-col>
                <el-col :span="23">
                  <el-col :span="24" style="color: #777888">{{items.fromOwner.name}} 回复 {{items.toOwner.name}} <span style="font-size: 13px;margin-left: 20px">{{item.create_date}}</span></el-col>
                  <el-col :span="24" style="padding-top: 5px;color: #222226;padding-top: 5px">
                    <el-popconfirm
                      confirm-button-text="回复"
                      cancel-button-text="取消"
                      :hide-icon="false"
                      @confirm="confirmClick(items,item.id)"
                    >
                      <span slot="reference">{{items.content}}</span>
                    </el-popconfirm>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-row>


      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-input type="textarea" v-model="content" placeholder="回复内容"></el-input>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadContent(1)">确 定</el-button>
      </span>
      </el-dialog>


    </div>
  </div>
</template>

<script>
  import Quill from "quill";
  import ImageResize from "quill-image-resize-module"; // 引用
  import {ImageDrop} from "quill-image-drop-module";
  import 'quill/dist/quill.snow.css'

  Quill.register("modules/imageDrop", ImageDrop);
  Quill.register("modules/imageResize", ImageResize); // 注册
  export default {
    name: "contentDts",
    data() {
      let _self = this;
      return {
        arrayList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 9],
        dialogVisible: false,
        addParam:{

        },
        commentCount: 0,
        list:[],
        user:{},
        to_user:'0',
        content: '',
        p_id:0,
        contentHtml: {
          "id": "2",
          "create_date": "2024-04-02 10:27:02",
          "update_date": "2024-04-02 10:34:12",
          "create_user": "admin",
          "type": 1,
          "content_type": 2,
          "cover": "d71ca019-732b-4de7-bf33-e6eb4a651a54.png",
          "count": null,
          "title": "7个方法教你猫跳蚤怎么去除更彻底！",
          "pet_type": 3,
          "content": "<h1>&nbsp;      &nbsp;<a href=\"http://www.boqii.com/tag/28529/\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(0, 0, 0);\">猫</a>跳蚤是一种很常见的寄生虫，猫咪感染后，不仅会因为引起皮肤炎症，更重要的是猫跳蚤身上携带多种细菌，甚至还会引起一些人畜共患的传染性<a href=\"http://www.boqii.com/tag/29010/\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(0, 0, 0);\">疾病</a>，像鼠疫、鼠型斑疹伤寒等疾病的传播过程中，跳蚤就是重要的传播介质。所以为了猫咪和主人的身体健康，一定要做好猫跳蚤的预防和驱杀工作，那么猫跳蚤怎么去除更彻底，下面一起了解一下吧！</h1><p class=\"ql-align-center\"><img src=\"http://img.boqiicdn.com/Data/BK/A/2106/21/imagick62161624259276_y.png\">&nbsp;</p><p class=\"ql-align-center\">&nbsp;&nbsp;&nbsp;&nbsp;跳蚤实拍图</p><p>&nbsp;&nbsp;&nbsp;1、猫跳蚤怎么去除？可以将橙子皮、西柚皮、三瓣蒜、一汤勺的迷迭香(也可不用)以及约500毫升水混合在一起，用榨汁机搅拌均匀，然后用小火加热15分钟。等晾凉后装进喷壶，避开猫咪眼睛，喷到它的身上就可以了。</p><p>&nbsp;&nbsp;&nbsp;2、猫跳蚤怎么去除？可以在猫咪经常活动的区域，定期放一些中草药包，药包里可以装上雪松、月桂、桉树的叶子，以及熏衣草、苦艾、茴香、薄荷等。这个方法也可以将猫跳蚤赶走！</p><p>&nbsp;&nbsp;&nbsp;3、猫跳蚤怎么去除？可以将一茶勺的醋混合在大约1000毫升的水中，作为猫咪的日常饮用水，对于防止跳蚤、扁虱，非常有效。</p><p>&nbsp;&nbsp;&nbsp;4、猫跳蚤怎么去除更彻底？可以每个月给猫咪用一次博来恩体内外同驱，它是四效复合配方，其中非泼罗尼和甲氧普烯是专门用来对付跳蚤、蜱虫、虱子等体外寄生虫的，1天之内就可以消灭猫跳蚤，同时可以有效防治跳蚤卵、幼虫及蚤蛹，所以灭蚤彻底不反复。与此同时博来恩里边的乙酰氨基阿维菌素和吡喹酮，可以消灭蛔虫、钩虫、绦虫，对家养的猫咪来说这个<a href=\"http://www.boqii.com/tag/224/\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(0, 0, 0);\">驱虫</a>配置完全够用了。</p><p class=\"ql-align-center\"><img src=\"http://img.boqiicdn.com/Data/BK/A/2106/21/imagick26131624259443_y.png\">&nbsp;</p><p>&nbsp;&nbsp;&nbsp;5、猫跳蚤怎么去除更彻底？给猫咪洗澡，保持猫咪身体的清洁，也是杜绝跳蚤的有效方法。在洗澡的同时可以采用杀跳蚤的洗发剂和<a href=\"http://www.boqii.com/tag/29019/\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(0, 0, 0);\">护理</a>液，从猫咪的头部开始，一点一点的向尾部进行清洗，彻底清除毛发内的跳蚤。</p><p class=\"ql-align-center\"><img src=\"http://img.boqiicdn.com/Data/BK/A/2106/21/imagick7451624259459_y.png\">&nbsp;</p><p>6、猫跳蚤怎么去除更彻底？保持猫咪生活环境的干净舒适，是杜绝猫跳蚤滋生最好的方法。养猫家庭，一定要勤打扫，多通风。平常定期用吸尘器洗干净地板以及屋内的死角，猫窝、猫咪衣服、玩具、饭碗等物品，需要定期清洗，并且拿到太阳底下晾晒消毒，还可以给家里喷洒<a href=\"http://www.boqii.com/tag/27064/\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(0, 0, 0);\">宠物</a>消毒剂，预防猫跳蚤的繁殖和生长。</p><p>7、猫跳蚤怎么去除更彻底？如果猫跳蚤比较严重，导致猫咪出现皮肤病，表皮开始出现红色斑块，并伴随着有脱毛的现象。铲屎官应该及时带猫咪去宠物医院就诊，以免猫咪病情加重。</p><p>以上就是关于猫跳蚤怎么去除更彻底的七个解决方法，这些方法大家可以根绝自己的实际情况结合起来用，比单一的灭蚤方法效果更好。最后提醒大家，对于猫跳蚤更多的是预防，而不是事后补救，上面提到的这些驱虫方法，日常养猫过程中，大家也可以积极地运用起来！</p>",
          "brief_introduction": "猫跳蚤是一种很常见的寄生虫，猫咪感染后，不仅会因为引起皮肤炎症，更重要的是猫跳蚤身上携带多种细菌，甚至还会引起一些人畜共患的传染性疾病，像鼠疫、鼠型斑疹伤寒等疾病的传播过程中，跳蚤就是重要的传播介质。所以为了猫咪和主人的身体健康，一定要做好猫跳蚤的预防和驱杀工作，那么猫跳蚤怎么去除更彻底，下面一起了解一下吧！"
        },
      }
    },
    props: ['name'],
    created() {
      this.user = JSON.parse(sessionStorage.getItem("userInfo"))
      let json = JSON.parse(sessionStorage.getItem("contentDts"))
      this.contentHtml = json
      this.initList()
    },
    methods: {
      initList(){
        this.commentCount = 0
        this.service.get('/tbArticleInformation/getDataById?id=' + this.contentHtml.id )
          .then(result => {
            console.log(result)
            this.list = result.data.data.commentList;
            for (let i = 0; i < this.list.length; i++) {
              this.commentCount ++;
              for (let j = 0; j < this.list[i].commentList.length; j++) {
                this.commentCount ++;
              }
            }
            console.log(this.list)
          })
      },
      uploadContent(state) {
        if (this.content.length < 1) {
          this.$message.error("当前未输入回复内容，请输入！")
          return false;
        }

        this.addParam.from_user = this.user.id
        this.addParam.content = this.content;
        this.addParam.article_info_id = this.contentHtml.id
        this.addParam.to_user = this.to_user
        this.addParam.p_id = this.p_id

        this.service.post('/tbComment/add'
          , {data:this.addParam})
          .then(result => {
            let data = result.data;
            if(data.code == 500){
              this.$message.error("请求失败：" + data.data)
            }
            if(data.data > 0){
              this.$message.success('评论成功')
              for(let item in this.addParam){
                this.addParam[item] = '';
              }
              this.initList();
              if(state == 1){
                this.dialogVisible = false
              }
            }else {
              this.$message.error('增加失败')
            }
            this.p_id = 0
            this.to_user = '0'
            this.content = ''
          })
      },
      confirmClick(item,p_id) {
        this.p_id = item.id
        this.to_user = item.from_user
        if(p_id != 0){
          this.p_id = p_id
        }
        this.dialogVisible = true
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {

            done();
          })
          .catch(_ => {
          });
      }
    }

  }
</script>

<style scoped>

</style>
